
<template>
  <div class="box">
    <div class="box-img"><img src="../../assets/images/us1.jpg" alt="" /></div>
    <div class="bj">
      <!-- 标题组件 -->
      <xtltie :xtitle="xtitle"></xtltie>
      <!-- 页面主体 -->
      <div class="main">
        <!-- 联系方式，地址 -->
        <div class="connect">
          <div class="connect-left">
            <span>燕台山酒庄</span>
          </div>
          <div class="connect-right">
            <div class="c-l-con">
              <div class="con-img">
                <img src="../../assets/images/contu.jpg" alt="" />
              </div>
              <div>135-9717-7195</div>
            </div>
            <div class="c-l-text">
              地址：广西南宁市马山县周鹿镇大北屯（燕台山酒庄）
            </div>
          </div>
        </div>
        <!-- 地图导入 -->
        <div class="dizhi">
          <div class="d-title">
            <span></span>
            <span>全国销售网点</span>
          </div>
          <div class="bmap">
            <img src="../../assets/images/map.jpg" alt="">
          </div>
        </div>
        <!-- 底部导航 -->
        <bottom-nav></bottom-nav>
      </div>
    </div>
  </div>
</template>

<script>
import bottomNav from "../../components/bottomNav.vue";
//导入标题
import Xtltie from "../../components/Xtltie.vue";
export default {
  name: "Myus",
  //注册组件
  components: {
    Xtltie,
    bottomNav,
  },
  data() {
    return {
      xtitle: {
        name: "联系我们",
        nameEnglish: "CONTACT US",
      },
      // map: {
      //   center: { lng: 116.404, lat: 39.915 },
      // },
    };
  },

  mounted() {
    // // 获取地理位置
    // // eslint-disable-next-line no-undef
    // var geolocation = new BMapGL.Geolocation();
    // geolocation.getCurrentPosition(function (r) {
    //   //eslint-disable-next-line no-undef
    //   if (this.getStatus() == BMAP_STATUS_SUCCESS) {
    //     // eslint-disable-next-line no-undef
    //     var mk = new BMapGL.Marker(r.point);
    //     map.addOverlay(mk);
    //     map.panTo(r.point);
    //     this.map.center.lng = r.point.lng;
    //     this.map.center.lat = r.point.lat;
    //     // alert("您的位置：" + r.point.lng + "," + r.point.lat);
    //   }
    //   // else {
    //   //   alert("failed" + this.getStatus());
    //   // }
    // });
    // // 2. 创建地图示例
    // var map = new window.BMapGL.Map("container");
    // // 3. 设置中心点坐标
    // var point = new window.BMapGL.Point(
    //   this.map.center.lng,
    //   this.map.center.lat
    // );
    // // 4. 地图初始化，同时设置地图展示级别
    // map.centerAndZoom(point, 15);
    // // 5. 开启鼠标滚轮缩放
    // map.enableScrollWheelZoom(true);
    // var scaleCtrl = new window.BMapGL.ScaleControl(); // 添加比例尺控件
    // map.addControl(scaleCtrl);
    // var zoomCtrl = new window.BMapGL.ZoomControl(); // 添加缩放控件
    // map.addControl(zoomCtrl);
    // var cityCtrl = new window.BMapGL.CityListControl(); // 添加城市列表控件
    // map.addControl(cityCtrl);
    // var opts = {
    //   width: 250, // 信息窗口宽度
    //   height: 100, // 信息窗口高度
    //   title: "Hello", // 信息窗口标题
    // };
    // // eslint-disable-next-line no-undef
    // var infoWindow = new BMapGL.InfoWindow("World", opts); // 创建信息窗口对象
    // map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
  },
};
</script>

<style lang="less" scoped>
@media screen and (min-width: 1029px) {
  .box {
    .box-img {
      position: relative;
      margin-bottom: 80px;
      img {
        width: 100%;
      }
    }

    // 总体样式
    .bj {
      width: 100%;
      // height: 1590px;
      height: auto;
      padding-bottom: 6%;
      position: relative;
      background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
      background-size: 100% 100%;
      .main {
        width: 70%;
        margin: auto;
        margin-top: 125px;
        // 联系方式样式
        .connect {
          display: flex;
          width: 100%;
          height: 165px;
          // 联系方式左侧样式
          .connect-left {
            width: 25%;
            height: 165px;
            line-height: 165px;
            background: url("../../assets/images/conbj.jpg");
            span {
              font-size: 22px;
              color: #ffffff;
            }
          }
          // 联系方式右侧样式
          .connect-right {
            width: 70%;
            height: 165px;
            // flex-grow: 1;
            border: 1px solid #c8c8c8;
            .c-l-con {
              display: flex;
              align-content: center;
              justify-content: center;
              margin-top: 20px;

              .con-img {
                width: 54px;
                height: 63px;
                img {
                  width: 100%;
                  padding-top: 5px;
                  transform: scale(0.9);
                }
              }

              div {
                font-size: 50px;
                font-weight: bold;
                color: #725a47;
              }
            }
            .c-l-text {
              margin-top: 20px;
              font-size: 22px;
              color: #725a47;
            }
          }
        }

        // 地址样式
        .dizhi {
          margin-top: 100px;
          padding-bottom: 10%;
          .d-title {
            display: flex;
            justify-content: space-between;
            span {
              font-size: 22px;
              color: #e50c09;
            }
          }
          .bmap {
            width: 100%;
            border: 1px solid #000;
            img{
              width: 100%;
            }
          }
        }
      }
    }
  }
}
@media only screen and (min-width: 750px) and (max-width: 1028px) {
  .box {
    .box-img {
      position: relative;
      margin-bottom: 80px;
      img {
        width: 100%;
      }
    }

    // 总体样式
    .bj {
      width: 100%;
      // height: 1590px;
      height: auto;
      padding-bottom: 6%;
      position: relative;
      background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
      background-size: 100% 100%;
      .main {
        width: 70%;
        margin: auto;
        margin-top: 125px;
        // 联系方式样式
        .connect {
          display: flex;
          width: 100%;
          height: 165px;
          // 联系方式左侧样式
          .connect-left {
            width: 25%;
            height: 100px;
            line-height: 100px;
            background: url("../../assets/images/conbj.jpg");
            span {
              font-size: 22px;
              color: #ffffff;
            }
          }
          // 联系方式右侧样式
          .connect-right {
            width: 70%;
            height: 100px;
            // flex-grow: 1;
            border: 1px solid #c8c8c8;
            .c-l-con {
              display: flex;
              align-content: center;
              justify-content: center;
              // margin-top: 20px;

              .con-img {
                width: 54px;
                // height: 63px;
                img {
                  width: 70%;
                  // padding-top: 5px;
                  transform: scale(0.9);
                }
              }

              div {
                // margin-left: 20px;
                font-size: 34px;
                font-weight: bold;
                color: #725a47;
              }
            }
            .c-l-text {
              // margin-top: 20px;
              font-size: 22px;
              color: #725a47;
            }
          }
        }

        // 地址样式
        .dizhi {
          margin-top: 100px;
          padding-bottom: 10%;
          .d-title {
            display: flex;
            justify-content: space-between;
            span {
              font-size: 22px;
              color: #e50c09;
            }
          }
          .bmap {
            width: 100%;
            border: 1px solid #000;
            overflow: hidden;
            img{
              width: 100%;
              transform: scale(1.5);
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 749px) {
  .box {
    .box-img {
      position: relative;
      margin-bottom: 10px;
      img {
        width: 100%;
      }
    }

    // 总体样式
    .bj {
      width: 100%;
      // height: 1590px;
      height: auto;
      padding-bottom: 6%;
      position: relative;
      background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
      background-size: 100% 100%;
      .main {
        width: 90%;
        margin: auto;
        margin-top: 15px;
        // 联系方式样式
        .connect {
          // display: flex;
          width: 100%;
          height: 165px;
          // 联系方式左侧样式
          .connect-left {
            width: 50%;
            // height: 100px;
            margin: auto;
            // line-height: 100px;
            background: url("../../assets/images/conbj.jpg");
            span {
              font-size: 22px;
              color: #ffffff;
            }
          }
          // 联系方式右侧样式
          .connect-right {
            width: 100%;
            height: 100px;
            // flex-grow: 1;
            // border: 1px solid #c8c8c8;
            .c-l-con {
              display: flex;
              align-content: center;
              justify-content: center;
              // margin-top: 20px;

              .con-img {
                width: 54px;
                // height: 63px;
                img {
                  width: 55%;
                  // padding-top: 5px;
                  transform: scale(0.9);
                }
              }

              div {
                // margin-left: 20px;
                font-size: 24px;
                font-weight: bold;
                color: #725a47;
              }
            }
            .c-l-text {
              // margin-top: 20px;
              font-size: 22px;
              color: #725a47;
            }
          }
        }

        // 地址样式
        .dizhi {
          // margin-top: 100px;
          padding-bottom: 10%;
          .d-title {
            display: flex;
            justify-content: space-between;
            span {
              font-size: 22px;
              color: #e50c09;
            }
          }
          .bmap {
            width: 100%;
            border: 1px solid #000;
            overflow: hidden;
            img{
              width: 100%;
              transform: scale(3);
            }
          }
        }
      }
    }
  }
  .nav-bot {
    display: none;
  }
}
</style>